<template>
	<view>
		<view class="backBox">
			<image @click="back" src="../../static/back.png"></image>
		</view>
		<view class="count-down">
			<view class="countTit">支付时间</view>
			<view class="count">
				<text class="time">{{hour}}</text>
				<text class="dot">:</text>
				<text class="time">{{min}}</text>
				<text class="dot">:</text>
				<text class="time">{{sec}}</text>
			</view>
		</view>
		<view class="orderTime"></view>
		<view class="orderPrice"><text><text class="iconText">¥</text>{{Number(wxPayAmount).toFixed(2) || 0}}</text></view>
		<view class="orderTip">支付方式</view>
		<view class="orderBox">
			<view class="box" v-for="(item,index) in payList" :key="index" @click="isChoose = item.type">
				<!-- <view class="line" v-if="index != 2"></view> -->
				<view class="box_left">
					<image :src="item.logo"></image>{{item.name}}
				</view>
				<view class="box_right">
					<image v-if="isChoose == item.type" src="../../static/checkOn.png" ></image>
					<image v-else src="../../static/check.png" ></image>
				</view>
			</view>
		</view>
		<view class="orderBtn" @click="pay">立即支付</view>
	</view>
</template>

<script>
	import wx from "jweixin-module"
	var jweixin = require('jweixin-module');
	export default{
		data(){
			return{
				orderId:0,
				orderData:{},
				isChoose:1,//选择支付方式
				payList:[
					// {name:'福币支付',logo:'../../static/images/pay_1.png',type:0},
					{name:'微信支付',logo:'../../static/images/pay_2.png',type:1},
					// {name:'组合支付',logo:'../../static/images/pay_3.png',isChoose:1,,type:2},
				],
				clickFlag:false,
				userInfo:{},//用户数据
				config:'',//微信配置
				wxPayAmount:0,
				CountDown: 0,
				day: 0,
				hour: '00',
				min: '00',
				sec: '00',
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.$wxHide()
			this.getData(e.id)
			this.getUserInfo()
			this.getOverTime(e.id)
			
		},
		
		methods:{
			back(){
				uni.navigateBack()
			},
			
			//获取个人信息
			getUserInfo() {
				this.uni_request({
					url: '/api/user/getUserInfo',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.userInfo = res.data.data
							this.wxconfig()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					},
				})
				
			},
			
			getOverTime(id){
				var that = this
				that.uni_request({
					url: '/api/order/overTime/'+id,
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							var now = Date.parse(new Date()).toString().substr(0,10);
							var end = Date.parse(new Date(res.data.data)).toString().substr(0,10);
							that.CountDown = Number(end - now)
							
							that.day = parseInt(that.CountDown / (24*60*60))
							that.hour = parseInt(that.CountDown / (60 * 60) % 24);
							that.min = parseInt(that.CountDown / 60 % 60);
							that.sec = parseInt(that.CountDown % 60);
							if(that.hour<10){
								that.hour = '0' + that.hour
							}
							if(that.min<10){
								that.min = '0' + that.min
							}
							if(that.sec<10){
								that.sec = '0' + that.sec
							}
							that.CountDownData()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					},
				})
			},
			
			//支付
			pay(){
				var that = this;
				if(that.clickFlag){
					return
				}
				if(that.isChoose == 0){
					//福币支付
					that.balance()
				}else if(that.isChoose == 1){
					//微信支付
					that.weChat()
				}else{
					//组合支付
				}
			},
			
			//福币支付
			balance(){
				var that = this;
				// if(Number(that.userInfo.balance) < Number(that.orderData.orderAmount)){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'福币不足~'
				// 	})
				// 	return
				// }
				// that.clickFlag = true;
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				that.clickFlag = true;
				that.uni_request({
					url: '/api/pay/fb',
					method: 'POST',
					data:{
						orderId:that.orderId,
					},
					success: (res) => {
						uni.hideLoading()
						that.clickFlag = false
						
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								icon:'success',
								title: res.data.msg,
							})
							setTimeout(function() {
								uni.switchTab({
									url:'/pages/take-foods/take-foods'
								})
							}, 1000);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
				})
			},
			//微信支付
			weChat(){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				that.clickFlag = true;
				that.uni_request({
					url: '/api/pay/wx',
					method: 'POST',
					data:{
						orderId:that.orderId,
					},
					success: (res) => {
						uni.hideLoading()
						that.clickFlag = false
						if (res.data.code == 0 || res.data.code == 200) {
							var payData = res.data.data
							jweixin.chooseWXPay({
							    appId: payData.jsapi_appid,
							    timestamp: payData.jsapi_timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							    nonceStr: payData.jsapi_noncestr, // 支付签名随机串，不长于 32
							    package: payData.jsapi_package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							    signType: payData.jsapi_signtype, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							    paySign: payData.jsapi_paysign, // 支付签名
							    success: function(res) {
							        uni.showToast({
							            title: "付款成功！",
							            duration: 1000
							        })
									setTimeout(function() {
										uni.switchTab({
											url:'/pages/take-foods/take-foods'
										})
									}, 1000);
							    },
							    cancel: function(res) {
							        
							        uni.showToast({
							            title: "付款失败！",
										icon:"none",
							            duration: 1000
							        })
							
							    },
							    fail: function(res) {
							        
							        uni.showToast({
							            title: "付款失败！",
										icon:"none",
							            duration: 1000
							        })
							    }
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					},
				})
			},
			//微信配置
			wxconfig(){
			    var that = this;
				that.uni_request({
					url: '/weChat/getConfig',
					method:'GET',
					success: (res) => {
						
						that.config = JSON.stringify(res)
						jweixin.config({
						    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						    appId: res.data.data.appid, // 必填，公众号的唯一标识
						    timestamp: res.data.data.timeStamp, // 必填，生成签名的时间戳
						    nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
						    signature: res.data.data.signature, // 必填，签名
						    openId: that.userInfo.openId,
							jsApiList: [ //这里是需要用到的接口名称
						       'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
						       'chooseWXPay', //微信支付  
						   ], // 必填，需要使用的JS接口列表
						});
					}
				})
			},
			
			//加载订单详情
			getData(id){
				var that = this;
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				that.clickFlag = true;
				that.uni_request({
					url: '/api/order/' + id,
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						
						if (res.data.code == 0 || res.data.code == 200) {
							that.clickFlag = false;
							that.orderData = res.data.data
							that.wxPayAmount = res.data.data.wxPayAmount
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					},
					fail(e){
						uni.hideLoading()
					},
				})
			},
			CountDownData(){
				var that = this;
				that.setTimer = setTimeout(() =>{
					that.CountDown--;
					that.day = parseInt(that.CountDown / (24*60*60))
					that.hour = parseInt(that.CountDown / (60 * 60) % 24);
					that.min = parseInt(that.CountDown / 60 % 60);
					that.sec = parseInt(that.CountDown % 60);
					if(that.hour<10){
						that.hour = '0' + that.hour
					}
					if(that.min<10){
						that.min = '0' + that.min
					}
					if(that.sec<10){
						that.sec = '0' + that.sec
					}
					if(that.CountDown <= 0){
						uni.showToast({
							title:'支付时间已过',
							icon:'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url:'/pages/take-foods/take-foods'
							})
						}, 1000);
						return;
					}
					that.CountDownData();
				},1000)
			},　
		}
		
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f1f1f1 !important;
	}
	.backBox{
		padding:10px 12px 0 12px;
		image{
			height: 30px;
			width: 30px;
		}
	}
	.orderTime{
		@extend %flex-align-center;
		justify-content: center;
		padding: 10px 0;
	}
	.orderPrice{
		@extend %flex-align-center;
		justify-content: center;
		text{
			font-size: 25px;color: #000;font-weight: bold;
		}
		.iconText {
			font-size: 15px;
			margin-right: 2px;
		}
	}
	.orderTip{
		padding: 15px;font-size: 14px;
	}
	.orderBox{
		margin: 0 15px;
		padding: 5px 15px;
		background: #fff;
		border-radius: 10px;
		.box{
			@extend %flex-align-center; justify-content: space-between;
			height: 55px;position: relative;
			.box_left{
				image{width: 25px;height: 25px;margin-right: 8px}
				@extend %flex-align-center;font-weight: bold;font-size: 16px;
			}
			.box_right{
				image{width: 25px;height: 25px;}
			}
			.line{
				width: calc(100% - 60px);position: absolute;bottom: 0;left: 30px;
				height: 1px;background: #f4f4f4;
			}
		}
	}
	.orderBtn{
		width: calc(100vw - 30px);
		height: 50px;background: $base;
		@extend %flex-align-center; justify-content: center;
		border-radius: 30px;position: fixed;
		bottom: 10px;left: 10px;color: #fff;font-size: 17px;letter-spacing: 1px;
	}
	.count-down{
		display: flex;align-items: center;justify-content: center;width: 100%;height: 60rpx;margin-top: 20px;
		.countTit{font-size: 28rpx;color: #222222;}
		.count{
			display: flex;align-items: center;margin-left: 20rpx;
			.time{padding: 4rpx 4rpx;background-color: #EEEEEE;font-size: 28rpx;color: #222222;border-radius: 2rpx;}
			.dot{margin: 0 10rpx;font-size: 28rpx;color: #222222;}
		}
	}
</style>